import { map } from "lodash";
import React from "react";
import { Section, Select, Input, InputNumber, Switch } from "@/components/visualizations/editor";
import { EditorPropTypes } from "@/visualizations/prop-types";

export default function GeneralSettings({ options, data, visualizationName, onOptionsChange }) {
  const downclock = options.downclock || (new Date()).getFullYear() + '-12-31 23:59:59';

  return (
    <React.Fragment>
      <Section>
        <Select
          layout="horizontal"
          label="显示样式"
          data-test="Counter.General.PercentProcess"
          defaultValue={options.percentProcess || ""}
          onChange={percentProcess => onOptionsChange({ percentProcess })}>
          <Select.Option value="">计数器</Select.Option>
          <Select.Option value="line">标准进度条</Select.Option>
          <Select.Option value="circle">圆形进度条</Select.Option>
          <Select.Option value="dashboard">仪表盘进度条</Select.Option>
          <Select.Option value="flip">翻牌计数器</Select.Option>
          <Select.Option value="clock">时钟</Select.Option>
          <Select.Option value="downclock">倒计时器</Select.Option>
        </Select>
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="倒计时器目标时间"
          data-test="Counter.General.Label"
          defaultValue={downclock}
          disabled={options.percentProcess!=='downclock'}
          placeholder={visualizationName}
          onChange={e => onOptionsChange({ downclock: e.target.value })}
        />
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="计数器标题"
          data-test="Counter.General.Label"
          defaultValue={options.counterLabel}
          placeholder={visualizationName}
          onChange={e => onOptionsChange({ counterLabel: e.target.value })}
        />
      </Section>

      <Section>
        <Select
          layout="horizontal"
          label="标题对齐方式"
          data-test="Counter.General.ValueColumn"
          defaultValue={options.labelAlign}
          onChange={labelAlign => onOptionsChange({ labelAlign })}>
          <Select.Option key="">居中</Select.Option>
          <Select.Option key="left">左对齐</Select.Option>
          <Select.Option key="right">右对齐</Select.Option>
        </Select>
      </Section>

      <Section>
        <Select
          layout="horizontal"
          label="计数器取值"
          data-test="Counter.General.ValueColumn"
          defaultValue={options.counterColName}
          disabled={options.countRow}
          onChange={counterColName => onOptionsChange({ counterColName })}>
          {map(data.columns, col => (
            <Select.Option key={col.name} data-test={"Counter.General.ValueColumn." + col.name}>
              {col.name}
            </Select.Option>
          ))}
        </Select>
      </Section>

      <Section>
        <InputNumber
          layout="horizontal"
          label="计数器行号"
          data-test="Counter.General.ValueRowNumber"
          defaultValue={options.rowNumber}
          disabled={options.countRow}
          onChange={rowNumber => onOptionsChange({ rowNumber })}
        />
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="目标值标题"
          data-test="Counter.General.Label"
          defaultValue={options.targetLabel}
          onChange={e => onOptionsChange({ targetLabel: e.target.value })}
        />
      </Section>

      <Section>
        <Select
          layout="horizontal"
          label="目标值对齐方式"
          data-test="Counter.General.ValueColumn"
          defaultValue={options.targetAlign}
          onChange={targetAlign => onOptionsChange({ targetAlign })}>
          <Select.Option key="">居中</Select.Option>
          <Select.Option key="left">左对齐</Select.Option>
          <Select.Option key="right">右对齐</Select.Option>
        </Select>
      </Section>

      <Section>
        <Select
          layout="horizontal"
          label="目标值取值"
          data-test="Counter.General.TargetValueColumn"
          defaultValue={options.targetColName}
          onChange={targetColName => onOptionsChange({ targetColName })}>
          <Select.Option value="">无目标值</Select.Option>
          {map(data.columns, col => (
            <Select.Option key={col.name} data-test={"Counter.General.TargetValueColumn." + col.name}>
              {col.name}
            </Select.Option>
          ))}
        </Select>
      </Section>

      <Section>
        <InputNumber
          layout="horizontal"
          label="目标值行号"
          data-test="Counter.General.TargetValueRowNumber"
          defaultValue={options.targetRowNumber}
          onChange={targetRowNumber => onOptionsChange({ targetRowNumber })}
        />
      </Section>

      <Section>
        <Switch
          data-test="Counter.General.CountRows"
          defaultChecked={options.countRow}
          onChange={countRow => onOptionsChange({ countRow })}>
          统计行数
        </Switch>
      </Section>
    </React.Fragment>
  );
}

GeneralSettings.propTypes = EditorPropTypes;
